/*
 * Copyright (C) 2013 - present Instructure, Inc.
 *
 * This file is part of Canvas.
 *
 * Canvas is free software: you can redistribute it and/or modify it under
 * the terms of the GNU Affero General Public License as published by the Free
 * Software Foundation, version 3 of the License.
 *
 * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
 * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
 * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
 * details.
 *
 * You should have received a copy of the GNU Affero General Public License along
 * with this program. If not, see <http://www.gnu.org/licenses/>.
 */

@import "base/environment";
@import "bundles/profile_edit";

.not-editing {
  .show-if-editing {
    display: none !important;
  }
}

.editing {
  .hide-if-editing {
    display: none !important;
  }
}
.profile .image-block {
  flex-direction: column;
  @include breakpoint(desktop) {
    flex-direction: row;
  }
}

.profile-avatar-wrapper {
  margin-right: 20px !important;

  a {
    float: left;
    position: relative;
  }

  img {
    box-shadow: 0 2 4 rgba(0, 0, 0, 0.5);
  }

  i {
    background: rgba(0, 0, 0, .75);
    bottom: 2px;
    color: #fff;
    height: 30px;
    padding: 4px;
    position: absolute;
    right: 2px;
    visibility: hidden;
    width: 30px;

    &:before {
      font-size: 30px;
      line-height: 30px;
    }
  }

  &:hover i {
    visibility: visible;
  }
}

.report_picture {
  margin: 0;
  text-align: center;
  @include fontSize(12px);
}

.more_user_information {
  fieldset {
    margin: 0;
    padding: 0;
    border: 0;
  }
  legend {
    margin: 0;
    @include fontSize(14px);
    margin: 1em 0 0.5em 0;
    color: $gray;
    border-bottom: solid 1px $borderColor;
    font-weight: normal !important;
    display: block;
    width: 100%;
  }
  #login_information {
    margin-top: 20px;
  }
}

#edit_profile_form {
  textarea {
    width: 97%;
    height: 100px;
  }
}

#edit_links_table {
  width: 100%;

  td {
    text-align: center;
  }
}

#right-side .right-side-h2-border {
  color: $gray;
  border-bottom: solid 1px $borderColor;
  box-shadow: 0 1px 0 white;
  margin: $right_side_margin 0 0;
  overflow: hidden;
}

.profileContent__Block {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.profileDetails {
  margin-top: 0;
}
.profileEnrollment__Items {
  padding: $ic-sp/2 0;
}
.profileLink {
  margin: 0;
}
.profileLink__Item {
  list-style: none;
  line-height: 2.0;
  & a {
    padding-left: $ic-sp/2;
  }
}
.profileHeader {
  padding: $ic-sp 0 0 0;
  line-height: 1.25;
}
.stats {
  text-align: left;
  width: 100%;
  tr {
    border-bottom: 1px solid #dfdfdf;
  }
  .stats-header {
    border-bottom: 1px solid $borderColor;
  }
  td {
    text-align: right;
    color: $ic-link-color;
    font-weight: bold;
  }
}

.social-header {
  font-weight: bold;
  margin: $gridGutterWidth 0 5px;
}

.social-links {
  list-style-type: none;
  margin: 0;
  padding: 0;
  li {
    float: left;
    margin-right: 10px;
    text-align: center;
    .social {
      width: 30px;
      height: 30px;
      background-image: url(/images/social-icons.png);
      display: block;
    }
  }
}

.message {
  background-position: 0 0;
  &:hover {
    background-position: 0 -32px;
  }
}

.google_docs {
  background-position: -296px 0;
  &:hover {
    background-position: -296px -32px;
  }
}

.twitter {
  background-position: -34px 0;
  &:hover {
    background-position: -34px -32px;
  }
}

.linked_in {
  background-position: -97px 0;
  &:hover {
    background-position: -97px -32px;
  }
}

.delicious {
  background-position: -129px 0;
  &:hover {
    background-position: -129px -32px;
  }
}

.diigo {
  background-position: -160px 0;
  &:hover {
    background-position: -160px -32px;
  }
}

.skype {
  background-position: -193px 0;
  &:hover {
    background-position: -193px -32px;
  }
}

// implemented to make new profile page use flex for layout //
.ic-Profile-layout {
  display: flex;
  padding: $ic-sp;
  box-sizing: border-box;
  width: 100%;
}

.ic-Profile-layout__Primary {
  flex: 2;
    @include breakpoint(desktop) {
    flex: 3;
  }
}

.ic-Profile-layout__Secondary {
  flex: 1;
  text-align: right;
}
